<template>
  <div>
    <div class="wrapper" ref="wrap">
      <ul ref="cont">
        <li v-for="item in 20" :key="item">
          第{{item}}个li
        </li>
      </ul>
    </div>
    <div class="bar">
      <div :style="{transform:`translateX(${dotLeft}px)`}"></div>
    </div>
  </div>
</template>

<script>
  import BScroll from '@better-scroll/core'
  export default {
    data() {
      return {
        dotLeft: 0  //存放指示器偏移距离
      }
    },
    mounted () {
      let {wrap,cont} = this.$refs
      let smax = cont.offsetWidth - wrap.offsetWidth
      console.log(smax);
      let bs = new BScroll(this.$refs.wrap, {
        // ...... 详见配置项
        click:true,
        scrollX:true, //开启横向滚动
        probeType:3  //配置scroll的派发频率
      })
      bs.on('scroll', (position) => {
        // console.log(position.x, position.y)
        let dotLeft = (position.x / smax)*180
        this.dotLeft = -dotLeft
      })
      // 已知条件：
      // 1. 滚动区域的最大滚动距离  smax = ul.offsetWidth - wrap.offsetWidth
      // 2. 实时滚动距离    sleft
      // 3. 指示条的最大滚动距离   200-20
      // 公式  ? / 180 = sleft / smax
    }
  }
</script>

<style lang="less" scoped>
.wrapper{
  height: 200px;
  border: 1px solid red;
  // overflow: scroll;
  overflow: hidden;
  ul{
    display: flex;
    width: fit-content;
  }
  li{
    line-height: 200px;
    width: 200px;
    margin:0 30px;
    background: orange;
    flex-shrink: 0;
  }
}
.bar{
  width:200px;
  height: 10px;
  background: #d8d8d8;
  margin:20px auto;
  overflow: hidden;
  div{
    width: 20px;
    height: 10px;
    background: red;
  }
}
</style>